<template>
	<view class="apply">
		<u-navbar bgColor="rgba(0,0,0,0)">
			<view slot="left" class="align-center">
				<view class="flex-center1" style="border-radius: 50%; width: 72rpx; height: 72rpx; background: rgba(0, 0, 0, 0.4)">
					<image @click="$tools.back()" src="@/static/login/back4.png" style="width: 36rpx; height: 36rpx"></image>
				</view>
			</view>
		</u-navbar>
		<u-swiper :list="obj.image" height="500" @change="(e) => (currentNum = e.current)" :autoplay="false" indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num flex-center1">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ obj.image.length }}</text>
			</view>
		</u-swiper>
		<view style="padding: 32rpx 32rpx 100rpx">
			<view style="font-size: 40rpx; color: #333333; margin-bottom: 24rpx">{{ obj.name }}</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #666666; margin-bottom: 26rpx">
				<text>{{ obj.num / 2 }}个上下铺</text>
				<text>｜</text>
				<text>{{ obj.useNum }}人入住</text>
				<text>｜</text>
				<text>{{ obj.size }}m²</text>
			</view>
			<!-- <view class="flex-between1">
				<text style="font-weight: 400; font-size: 24rpx; color: #666666">武汉市硚口区古田二路凯德广场</text>
				<text style="font-weight: 600; font-size: 24rpx; color: #1365f9">导航</text>
			</view> -->
			<view @click="dateshow1 = true" class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee">
				<text class="text1">入住时间</text>
				<text class="text2">{{ starttime ? starttime : '请选择入住时间' }}</text>
			</view>
			<u-datetime-picker :show="dateshow1" v-model="value1" mode="date" @confirm="dateconfirm" @cancel="dateshow1 = false"></u-datetime-picker>
			<view @click="dateshow2 = true" class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee; margin-bottom: 32rpx">
				<text class="text1">预计退房时间</text>
				<text class="text2">{{ endtime ? endtime : '请选择退房时间' }}</text>
			</view>
			<u-datetime-picker :show="dateshow2" v-model="value1" mode="date" @confirm="dateconfirm1" @cancel="dateshow2 = false"></u-datetime-picker>
			<view style="font-weight: 600; font-size: 32rpx; color: #333333">入住信息</view>
			<view class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee">
				<text class="text1">真实姓名</text>
				<text class="text2">{{ userInfo.name }}</text>
			</view>
			<view class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee">
				<text class="text1">性别</text>
				<text class="text2">{{ userInfo.sex == 1 ? '男' : '女' }}</text>
			</view>
			<view class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee">
				<text class="text1">民族</text>
				<text class="text2">{{ userInfo.nation }}</text>
			</view>
			<view class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee">
				<text class="text1">年龄</text>
				<text class="text2">{{ userInfo.age }}</text>
			</view>
			<view class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee">
				<text class="text1">身份证号</text>
				<text class="text2">{{ userInfo.idcard }}</text>
			</view>
			<view class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee">
				<text class="text1">婚姻状况</text>
				<text class="text2">{{ userInfo.marital }}</text>
			</view>
			<view class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee">
				<text class="text1">现住址</text>
				<text class="text2">{{ userInfo.address }}</text>
			</view>
			<view class="flex-between1" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee; margin-bottom: 52rpx">
				<text class="text1">联系电话</text>
				<text class="text2">{{ userInfo.phone }}</text>
			</view>
			<!-- <view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 48rpx">应聘单位：北京香格里拉酒店</view>
			<view style="font-weight: 600; font-size: 32rpx; color: #333333">应聘岗位：酒店大堂经理</view> -->
		</view>
		<view class="flex-center1">
			<view
				@click="baoming"
				class="flex-center1"
				style="font-weight: 500; font-size: 36rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx"
			>
				提交
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="center" round="20" :closeOnClickOverlay="false">
			<view class="pop" style="width: 560rpx; height: 496rpx; padding-top: 64rpx; background: url('../../static/index/bm.png') no-repeat; background-size: 100% 100%">
				<view class="flex-center1" style="margin-bottom: 30rpx">
					<image src="@/static/index/bm1.png" style="width: 168rpx; height: 152rpx"></image>
				</view>
				<view style="font-size: 32rpx; color: #333333; text-align: center; margin-bottom: 30rpx">提交成功</view>
				<view class="flex-center1">
					<view
						@click="
							show = false;
							$tools.back();
						"
						class="flex-center1"
						style="width: 480rpx; height: 88rpx; background: rgba(19, 101, 249, 0.1); border-radius: 8rpx; font-weight: 400; font-size: 28rpx; color: #1365f9"
					>
						等待确认中…
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			currentNum: 0,
			value1: Number(new Date()),
			dateshow1: false,
			dateshow2: false,
			starttime: '',
			endtime: '',
			starttimenum: '',
			endtimenum: '',
			obj: {},
			userInfo: {}
		};
	},
	onLoad(option) {
		this.obj = JSON.parse(option.value);
		this.obj.image = this.obj.image.split(',');
		console.log(this.obj, 'this.obj');
		this.init();
	},
	methods: {
		init() {
			this.$request('front/user/userInfo').then((res) => {
				console.log(res, '个人信息');
				this.userInfo = res.obj.userInfo;
			});
		},
		dateconfirm(value) {
			this.starttimenum = value.value;
			this.starttime = this.$u.timeFormat(value.value, 'yyyy-mm-dd');
			this.dateshow1 = false;
		},
		dateconfirm1(value) {
			this.endtimenum = value.value;
			this.endtime = this.$u.timeFormat(value.value, 'yyyy-mm-dd');
			this.dateshow2 = false;
		},
		baoming() {
			if (!this.starttime) return this.$tools.toast('请输入入住时间');
			if (!this.endtime) return this.$tools.toast('请输入退房时间');
			if (this.starttimenum > this.endtime) return this.$tools.toast('入住时间不能大于离店时间');
			this.$request('front/userHome/signRoom', { id: this.obj.id, inDate: this.starttime, outDate: this.endtime }).then((res) => {
				console.log(res, '报名');
				if (res.code == 0) {
					this.show = true;
				}
			});
		},
		open() {
			// console.log('open');
		},
		close() {
			this.show = false;
			// console.log('close');
		}
	}
};
</script>

<style lang="less" scoped>
.apply {
	padding-bottom: 100rpx;
	.text1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.text2 {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		text-align: right;
	}
	.pop {
	}
}
</style>
